<template>
  <BasicModal :show="show" title="未联系上" width="30%"  :widthComfirm="true" @comfirm="comfirm">
    <template #content>
      <CommonForm :formList="formList" ref="formRef" :labelWidth="'50px'"></CommonForm>
      <div class="history" v-if="historyList.length>0">
        <div class="title">历史记录</div>
        <div class="history-wrap">
          <div class="history-item" v-for="(item, idx) in historyList" :key="idx" >
            <div class="top">
              <div class="wmm-tail">
                <span>{{ idx + 1 }}</span>
              </div>
              <div class="reason">{{ item.touchlessRemark }}</div>
            </div>
            <div class="bottom">
              <div class="person">操作人：{{ item.operator }}</div>
              <div class="date">操作时间：{{ item.operatorTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </BasicModal>
</template>

<script setup lang='ts'>
import CommonForm from "@/views/applicationDetails/CommonForm.vue";
import BasicModal from "./BasicModal.vue";
import { ref, watch } from "vue"
const props = defineProps(['process']);
import type { IndexFormItem } from "@/views/ApplicationDetails/application-type.ts";
import { touchless, touchlessList } from "@/api/application-details/index.ts";
const show = ref<boolean>(false);
import { comStores } from '@/store/common/comStore';
import { message } from "ant-design-vue";
const store = comStores()

const formList = ref<IndexFormItem[]>([
  { label: "备注", name: "remark", value: "", disabled: true, component: 'textarea' ,required:false},

])
const formRef = ref<any>(null)

export interface HistoryList {
  id: number
  createTime: string
  updateTime: string
  isDeleted: number
  resumeId: number
  processId: number
  touchlessTime: string
  touchlessRemark: string
  operator: string
  operatorTime: string
}
const historyList = ref<HistoryList[]>([
])
const getHistoryList = async () => {
  const { resumeId } = store.currentResume
  const data = await touchlessList({ resumeId });
  if (data && data.code === '10000') {
    historyList.value = data.data
  } else {
    message.error(data.mmsg)
    historyList.value = []
  }
}

watch(() => show.value, (val) => {
  if (val) {
    getHistoryList()
  }
})

const comfirm = async () => {
  const res = await formRef.value.submitForm();
  console.log(res, 'res');
  const { resumeId, processId } = store.currentResume;
  const { userName } = store.userInFor
  let param = {
    resumeId,
    processId,
    operator: userName,
    remark: res[0].value
  }
  const data = await touchless(param);
  console.log(data, 'data')
  if (data && data.code === '10000') {
    message.success('更新成功');
    store.getResumeInfo(resumeId);
    formList.value[0].value = ""
    show.value = false
  } else {
    message.error(data.msg)
  }
}

defineExpose({ show })
</script>

<style lang="less" scoped>


.history {
  display: flex;
  flex-direction: column;

  .history-wrap {
    max-height: 30vh;
    overflow: auto;
  }

  .title {
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    left: 10px;

    &::before {
      content: "";
      width: 4px;
      height: 20px;
      border-radius: 4px 0 0 4px;
      background: #209eff;
      position: absolute;
      left: -10px;
    }
  }

  .history-item {
    width: 100%;
    background: #F5F7FB;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 10px;
    padding: 17px 10px;
    box-sizing: border-box;

    .top {
      display: flex;
      margin-bottom: 20px;
    }

    .bottom {

      font-weight: 400;
      font-size: 14px;
      color: #ABBACD;
      line-height: 16px;

      display: flex;
      justify-content: space-between;
    }
  }
}
.reason{
  word-break: break-all;
  flex: 1
}
</style>
